<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-6
  Time: 上午 08:09
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
  <title>小米商城后台管理</title>
  <!-- 设置地址栏主题背景颜色 -->
  <meta name="theme-color" content="#000000">
  <!-- 页面描述 -->
  <meta name="description" content="页面描述信息">
  <!-- 移动端显示 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 页面Logo -->
  <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
  <!-- CSS -->
  <link href="${pageContext.request.contextPath}/other/style/background/permissions.css" rel="stylesheet"
        type="text/css"/>
  <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
  <script src="${pageContext.request.contextPath}/other/request/background/menu.js"></script>
  <script src="${pageContext.request.contextPath}/other/scripts/background/permissions.js"></script>
</head>
<body>
<div class="head">
  <div class="title">
    <span>权限管理</span>
  </div>

  <div class="search">
    <div class="search-input">
      <label>
        <input type="text" placeholder="请输入菜单名称/菜单ID">
      </label>
    </div>
    <div class="search-img">
      <img src="http://localhost:8083/resource_packs/images/search_%23fff.png" alt="搜索">
    </div>
  </div>
</div>
<div class="other-operate">
  <div class="sift">
    <label for="type">类型:</label>
    <select name="languages" id="type">
      <option value="0">默认菜单</option>
      <option value="1">非默认菜单</option>
    </select>
  </div>
  <div class="sift-button">
    <button class="select">查询</button>
  </div>
</div>
<table class="recycle-bin-table">
  <tr>
    <th>
      ID
    </th>
    <th>
      菜单名称
    </th>
    <th>
      菜单类型
    </th>
    <th>
      操作
    </th>
  </tr>
  <jsp:useBean id="menuPage" scope="request" type="com.xm.entity.Page"/>
  <c:forEach var="menu" items="${menuPage.data}">
    <tr>
      <td class="recycle-bin-id">
          ${menu.menuId}
      </td>
      <td>
          ${menu.menuName}
      </td>
      <td>
        <c:if test="${menu.menuDefault == 0}">
          默认菜单
        </c:if>
        <c:if test="${menu.menuDefault != 0}">
          非默认菜单
        </c:if>
      </td>
      <td class="operate">
        <button class="view" permissions="${menu.requiredPermissions}">查看</button>
      </td>
    </tr>

  </c:forEach>
</table>
<div class="pagination-function">
  <ul class="pagination">
    <c:if test="${menuPage.pageNumber ne 1}">
    <li><a href="?menuId=105&pageNumber=1&pageSize=${menuPage.pageSize}">首页</a>
    <li><a href="?menuId=105&pageNumber=${menuPage.pageNumber - 1}&pageSize=${menuPage.pageSize}">上一页</a>
      </c:if>

      <c:forEach var="page" begin="1" end="${menuPage.totalPages}">
      <c:choose>
      <c:when test="${page eq menuPage.pageNumber}">
    <li><a href="?menuId=105&pageNumber=${page}&pageSize=${menuPage.pageSize}" class="active">${page}</a>
      </c:when>
      <c:otherwise>
      <c:if test="${page eq 1 or page eq menuPage.totalPages or (page ge menuPage.pageNumber - 2 and page le menuPage.pageNumber + 2)}">
    <li><a href="?menuId=105&pageNumber=${page}&pageSize=${menuPage.pageSize}">${page}</a>
      </c:if>
      <c:if test="${page eq menuPage.pageNumber - 3}">
    <li><span>...</span>
      </c:if>
      <c:if test="${page eq menuPage.pageNumber + 3}">
    <li><span>...</span>
      </c:if>
      </c:otherwise>
      </c:choose>
      </c:forEach>

      <c:if test="${menuPage.pageNumber ne menuPage.totalPages}">
    <li><a href="?menuId=105&pageNumber=${menuPage.pageNumber + 1}&pageSize=${menuPage.pageSize}">下一页</a>
    <li><a href="?menuId=105&pageNumber=${menuPage.totalPages}&pageSize=${menuPage.pageSize}">尾页</a>
      </c:if>
  </ul>

</div>

<div class="window" style="display: none">
  <div class="pop-up-shade-layer"></div>
  <div class="pop-ups">
    <div class="pop-ups-title">
      <span>查看菜单信息</span>
      <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
           alt="弹窗关闭" class="pop-ups-down">
    </div>
    <div class="table">
      <div class="table-row table-header">
        <div class="table-cell">名称</div>
        <div class="table-cell">职称</div>
        <div class="table-cell">操作</div>
      </div>
      <div class="table-body goods-tbody">

      </div>
    </div>
  </div>
</div>
</body>
</html>
